@page "/range-slider/api"

@using Syncfusion.Blazor.Inputs;
@inherits SampleBaseComponent;

<SampleDescription>
 <p>This sample demonstrates the customization of Slider component by using its properties from property pane. Select any combination of properties from property pane to customize the Slider component.</p>   
</SampleDescription>
<ActionDescription>
   <p>In this demo, Range Slider is rendered with minimal configuration.</p>
   <p>This sample can be customized further with the combination of Slider properties from the property pane. For example,</p>       
   <p><code>Min</code>, <code>Max</code> and <code>Step</code> can be changed from the property pane.</p>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border">
    <div class="control-wrapper">
        <div class="content-wrapper" id="all-option-sample">
            <div class="sliderwrap">
                <SfSlider @bind-Value="@Value"
                           Min="@Min"
                           Max="@Max"
                           Step="@Step"
                           Type="@SliderType.MinRange"
                           TValue="int">
                    <SliderTicks Placement="@Placement.After" LargeStep="20" SmallStep="5" ShowSmallTicks="true"></SliderTicks>
                    <SliderTooltip IsVisible="true" Placement="@TooltipPlacement.Before"></SliderTooltip>
                </SfSlider>
            </div>
        </div>
    </div>
</div>
<div class="col-lg-4 property-section" id="all-option-table">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div><div class="property-panel-content">
            <table id="property" title="Properties" class="property-panel-table">
                <tbody>
                    <tr>
                        <td style="width: 50%">
                            <div class="userselect">Min</div>
                        </td>
                        <td style="width: 50%;padding-right: 10px">
                            <div>
                                <SfNumericTextBox TValue="int?" Value="@Min">
                                    <NumericTextBoxEvents TValue="int?" ValueChange="(e => { Min = (int)e.Value; })"></NumericTextBoxEvents>
                                </SfNumericTextBox>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%">
                            <div class="userselect">Max</div>
                        </td>
                        <td style="width: 50%;padding-right: 10px">
                            <div>
                                <SfNumericTextBox TValue="int?" Value="@Max">
                                    <NumericTextBoxEvents TValue="int?" ValueChange="(e => { Max = (int)e.Value; })"></NumericTextBoxEvents>
                                </SfNumericTextBox>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%">
                            <div class="userselect">Step</div>
                        </td>
                        <td style="width: 50%;padding-right: 10px">
                            <div>
                                <SfNumericTextBox TValue="int?" Value="@Step" Min="0" Max="100">
                                    <NumericTextBoxEvents TValue="int?" ValueChange="(e => { Step = (int)e.Value; })"></NumericTextBoxEvents>
                                </SfNumericTextBox>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code{
    int Value = 25;
    int Step = 1;
    int Min = 0;
    int Max = 100;
}

<style>
    #all-option-table .property-panel-section .property-panel-content table#property tr {
        height: 50px;
    }
    #all-option-sample .e-slider-container.e-horizontal {
        margin-top: 160px;
    }
    #all-option-sample .e-slider-container.e-vertical {
        margin-left: 40%;
    }
    #all-option-sample.content-wrapper {
        height: 363px;
        width: 50%;
        margin: 0 auto;
        min-width: 185px;
    }
    .sliderwrap {
        height: 340px;
    }
    .e-bigger .content-wrapper {
        width: 50%;
    }
    .sliderwrap label {
        padding-bottom: 26px;
        font-size: 13px;
        font-weight: 500;
        margin-top: 15px;
        text-align: left;
        width: 100%;
    }
    .userselect {
        -webkit-user-select: none;
        /* Safari 3.1+ */
        -moz-user-select: none;
        /* Firefox 2+ */
        -ms-user-select: none;
        /* IE 10+ */
        user-select: none;
        /* Standard syntax */
    }
</style>